import React,{useState} from 'react';
import Container from '@material-ui/core/Container';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
import InputLabel from '@material-ui/core/InputLabel';
import Input from '@material-ui/core/Input';
import FormHelperText from '@material-ui/core/FormHelperText';
import { makeStyles } from '@material-ui/core/styles';
import InputAdornment from '@material-ui/core/InputAdornment';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Button from '@material-ui/core/Button';
import { lazy } from 'react';
import L from '../L';
import { createHashHistory } from 'history'; // 如果是hash路由
import fetch from '../assets/utils/fetch'

const LoginTitle = lazy(() => (
    process.env.REACT_APP_PROJECT_NAME
    ? import(`./${process.env.REACT_APP_PROJECT_NAME}/Title`)
    : import(`./DefaultTitle`)
))

const history = createHashHistory();

const useStyles = makeStyles(theme => ({
    margin: {
      margin: theme.spacing(1),
      marginLeft:0,
    },
}));


export default function SimpleContainer() {
    const classes = useStyles();
    // 登录参数
    const [params, setparams] = useState({
        user_name:'',
        password:'',
    });
    // 登录错误提示信息
    const [errMsg, seterrMsg] = useState('');
    // 用户名输入
    function handleUserName(e){
        setparams({
            ...params,
            user_name:e.target.value
        })
    }
    // 密码输入
    function handlePassword(e){
        setparams({
            ...params,
            password:e.target.value
        })
    }
    // 密码框回车监听
    function handlePasswordKeyDown(e){
        // 回车
        if(e.keyCode == 13){
            handleLogin();
        }
    }

    function handleLogin(){
        fetch.post('/self/server/login/login',params,(err,res) =>{
            if(err){
                console.error(err);
            }
            else{
                if(res.code == 1){
                    // 将user对象存入本地 （加上项目前缀）
                    localStorage.setItem(process.env.REACT_APP_PROJECT_NAME+'_user',JSON.stringify(res.data.user));
                    history.replace('/');
                }
                else{
                    seterrMsg(res.alertMsg);
                }
            }
        })
        // window.fetch('https://aittmdev.bianla.cn/self/server/login/login',{
        //     method: 'POST',
        //     headers:{
        //         'Content-Type': "application/x-www-form-urlencoded"
        //     },
        //     body: qs.stringify(params)
        // })
        // .then((res) =>{
        //     return res.json();
        // })
        // .then((data) =>{
        //     if(data.code == 1){
        //         // 将user对象存入本地 （加上项目前缀）
        //         localStorage.setItem(process.env.REACT_APP_PROJECT_NAME+'_user',JSON.stringify(data.data.user));
        //         history.replace('/');
        //     }
        //     else{
        //         seterrMsg(data.alertMsg);
        //     }
        // })
    }


    return (
        <div style={{
            position:'absolute',
            width:'100%',
            height:'100%',
            display:'flex',
            alignItems:'center',
            justifyContent:'center'
        }}>
            <div>
            <L><LoginTitle></LoginTitle></L>
            <FormControl className={classes.margin}>
                <Input
                id="input-with-icon-adornment"
                placeholder="请输入账号"
                value={params.user_name}
                onChange={handleUserName}
                startAdornment={
                    <InputAdornment position="start">
                        <AccountCircle />
                    </InputAdornment>
                }
                />
            </FormControl>
            <div></div>
            <FormControl className={classes.margin}>
                <Input
                id="input-with-icon-adornment"
                type="password"
                placeholder="请输入密码"
                value={params.password}
                onChange={handlePassword}
                onKeyDown={handlePasswordKeyDown}
                startAdornment={
                    <InputAdornment position="start">
                        <AccountCircle />
                    </InputAdornment>
                }
                />
            </FormControl>
            <div style={{height:'20px',fontSize:'12px',lineHeight:'20px',color:'#f15f5f'}}>
                {errMsg}
            </div>
            <Button variant="outlined" onClick={handleLogin} color="primary" style={{width:'214px',marginTop:'10px'}}>
                登录
            </Button>
            </div>
        </div>
    );
}